<template>
    <div class="productslist">
    <header class="header">
        <div class="dec">当前积分</div>
        <div class="point">
        <div class="point-num">{{ userInfo.points }}</div> 
       <div class="nav"><button @click = 'gopointsdetail'>积分明细</button> <button @click = 'gopointsorder'>积分订单</button></div> 
    </div>
    </header>
    <main class="poducts"> 
    <div class="title"><div class="line">|</div> 积分兑换菜品 </div>    
    <div class="product-list">
        <div v-for="product in products" :key="product.id" class="product-item">
            <img :src="product.image" alt="Product Image" class="product-image">
            <div class="product-details">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-info"><p>积分：{{ product.points }}</p> <button @click="handle(product._id)">兑换</button></div>
            </div>
        </div>
    </div>

</main>

</div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { apiGetProductList } from '../api/product' // 引入获取商品列表的接口
  import { useRouter } from 'vue-router'
  import { apiGetUserInfo } from '../api/user'
  const router = useRouter()
  const products = ref([])
  const userInfo = ref({}) // 定义用户信息对象
  const userId = localStorage.getItem('userId') // 从本地存储中获取用户ID
  const getProducts = async () => {
    try {
      const data = await apiGetProductList() // 调用获取商品列表的接口
      products.value = data.list // 将商品列表赋值给变量products
      userInfo.value = await apiGetUserInfo(userId)
    }catch (err) {
      console.log(err)
    }
  }
  const gopointsdetail = () => {
    router.push('/points-detail')
  }
  const handle = (id) => {
    router.push(`/product/${id}`) // 跳转到订单页面
  }
  const gopointsorder = () => {
    router.push('/points-order')
  }
  onMounted(() => {
    getProducts() // 页面加载时调用获取商品列表的方法
  })
  </script>
  
  <style scoped lang="scss">
  .productslist {
    width: 100vw; /* 改为视口宽度适配移动端 */
    min-height: 100vh; /* 保持高度占满屏幕 */
   
    overflow-x: hidden; /* 禁止内容溢出导致的左右滚动 */

    .header {
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        background: linear-gradient(270deg, rgba(232, 89, 89, 1) 0%, rgba(245, 154, 35, 1) 99%);
        height: 15vh; /* 高度为100px */
      .dec {
        padding: 5vw 10vw 0 10vw; /* 上下左右内边距 */;
      }

      .point {
        display: flex;
        justify-content: space-between;
        padding: 5vw;
        .point-num {
           color:  #000000;
          /* 可添加积分数字的具体样式（如字体大小、颜色） */
        }
        .nav {
          display: flex;
          gap: 10px; /* 按钮间距 */
          color: rgba(0, 0, 0, 0.690196078431373);
          button {/* 按钮背景颜色 */
            border: none; /* 去除按钮边框 */
            cursor: pointer; /* 鼠标悬停时显示指针 */
            background-color: transparent; 
          }
        }
      }
    }
    .poducts{
        .title{
        display: flex;
       justify-content: start;
       padding: 1vh;
            .line{
            color: #e48d0a;; /* 线的颜色 */
            width: 2vh; /* 线的宽度 */
            }
            
        }
        .product-list{
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: space-around; /* 水平居中 */
        padding: 2vh;
        background-color: rgb(245, 239, 229);
        .product-item {
            border-radius: 10px;
            overflow: hidden;
            background-color: #eee8e8;
            display: inline-block;
            margin-bottom: 1vh;
            width: 45vw; /* 每个商品项的宽度 */
            height: 30vh; /* 每个商品项的高度 */;
            .product-image {
                width: 100%; /* 图片宽度 */
                height: auto; /* 图片高度自适应 */
            }
            .product-details{
            padding: 2vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .product-name {
                font-size: 16px; /* 商品名称字体大小 */
                margin-bottom: 10px; /* 商品名称与其他信息之间的间距 */
            }
            .product-info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            button{
                background-color: transparent; /* 兑换按钮背景颜色 */
                border: none;
                background-color: #df7a06;
                border-radius: 10px;
                width: 15vw;
                height: 4vh;
            }
        }
            }
        }
    }

  }}
  </style>